<template>
	<view class="store-home">
		<scroll-view class="main" scroll-y="true" @scroll="scrollHome" @scrolltolower="getGoods()">
			<u-swiper :list="list" height="600"></u-swiper>
			<view id="guarantee" class="guarantee">
				<view class="item">
					<image src="@/static/images/shop_icon1.png" mode=""></image>
					<view class="text">正品溯源</view>
				</view>
				<view class="item">
					<image src="@/static/images/shop_icon2.png" mode=""></image>
					<view class="text">假一赔十</view>
				</view>
				<view class="item">
					<image src="@/static/images/shop_icon3.png" mode=""></image>
					<view class="text">产地直邮</view>
				</view>
			</view>
			<view class="recommend">
				<view class="top">
					<view class="title">热卖推荐</view>
					<view class="subtitle"> 
						<span></span>
						<text>HOT SALES</text>
						<span></span>
					</view>
				</view>
				<view class="recommend-goods">
					<view class="item" v-for="(item, index) in store.recommend" :key="index" @click="goGoodsDetail(item.product_id)">
						<image :src="item.image" mode=""></image>
						<view class="name">{{ item.store_name }}</view>
						<view class="price">{{ item.price }}</view>
					</view>
				</view>
			</view>
			<view class="recommend">
				<view class="top">
					<view class="title">优选好货</view>
					<view class="subtitle">
						<span></span>
						<text>RECOMMENDED GOODS</text>
						<span></span>
					</view>
				</view>
				<view class="recommend-goods">
					<view class="item" v-for="(item, index) in store.optimal" :key="index" @click="goGoodsDetail(item.product_id)">
						<image :src="item.image" mode=""></image>
						<view class="name">{{ item.store_name }}</view>
						<view class="price">{{ item.price }}</view>
					</view>
				</view>
			</view>
			<view class="store">
				<image style="background-color: #FFFFFF;" :src="store.mer_avatar"></image>
				<view class="text">
					<text class="name">{{ store.mer_name }}</text>
					<view class="score">
						<u-rate :disabled="true" size="24" :count="count" v-model="store.product_score"></u-rate>
						<span style="padding-left: 10rpx; font-size: 26rpx;color: #000000;">{{ store.product_score }}</span>
					</view>
				</view>
				<view class="goodssum">
					<view class="sum">{{ store.totalProduct }}</view>
					<view class="ww">全部商品</view>
				</view>
			</view>
			<view class="nav">
				<view class="nav-cont" :class="{ fff: navShow }">
					<view class="item" style="padding: 0 30rpx;">
						<navigator class="navigator" :class="{ fwfw: navShow }" :url="'/pages/list/index?mer_id=' + id" hover-class="none">
							<u-icon name="search" size="28"></u-icon>
							搜索
						</navigator>
					</view>
					<view :class="{ active: navActive === 0 }" class="item" @click="navActive = 0">
						<view class="cont">{{ i18n.Default }}</view>
					</view>
					<view :class="{ active: navActive === 1 }" class="item" @click="set_where(2)">
						<view class="cont">{{ i18n.Sales }}</view>
					</view>
					<view :class="{ active: navActive === 2 }" class="item" @click="set_where(3)">
						<view class="cont">
							{{ i18n.Price }}
							<image :src="sortPrice ? '@/static/images/high-price.png' : '@/static/images/low-price.png'"></image>
						</view>
					</view>
					<view :class="{ active: navActive === 3 }" class="item" @click="set_where(4)">
						<view class="cont">{{ i18n.New }}</view>
					</view>
					<view
						class="item"
						@click="
							select.show = false;
							navActive = 4;
							isColumn = !isColumn;
						"
					>
						<view class="cont"><text :class="['layout-icon', 'iconfont', isColumn ? 'iconliebiao' : 'iconliebiao1']"></text></view>
					</view>
				</view>
			</view>

			<!-- 商品 -->
			<view class="goods-wrap">
				<view class="top">
					<view class="title">热卖推荐</view>
					<view class="subtitle">
						<span></span>
						<text>HOT SALES</text>
						<span></span>
					</view>
				</view>
				<view v-if="goods.length" :class="{ column: isColumn }" class="goods">
					<view v-for="item in goods" :key="item.product_id" class="item" @click="goGoodsDetail(item.product_id)">
						<view class="image"><image :src="item.image"></image></view>
						<view class="text">
							<view class="name">{{ item.store_name }}</view>
							<view class="money-wrap">
								<view class="money">
									¥
									<text>{{ item.price }}</text>
								</view>
								<view class="label">
									<view class="ticket" v-if="item.issetCoupon">{{ i18n.Get }}</view>
									<view class="ticket">{{ i18n.Importedgoods }}</view>
									<view class="ticket">{{ i18n.Crossborderdirect }}</view>
									<view class="pinkage">{{ i18n.Pinkage }}</view>
								</view>
							</view>
							<view class="score">{{ item.rate }}{{ i18n.Score }} {{ item.reply_count }}{{ i18n.Comments }}</view>
						</view>
						<view v-if="item.max_extension" class="foot">
							<text v-show="!isColumn" class="iconfont"></text>
							{{ i18n.Earn }} ¥{{ item.max_extension }}
						</view>
					</view>
				</view>
			</view>
			<view style="text-align: center; margin-bottom: 10rpx; font-size: 24rpx;">{{ loadTitle }}</view>
			<!-- 加载更多 -->
		</scroll-view>
		<view class="float" @click="isopen = true"><image src="@/static/images/share_icon.png" mode=""></image></view>
		<u-popup v-model="isopen" mode="bottom" height="300rpx">
			<view class="content">
				<!-- #ifdef MP -->
				<button open-type="share" class="weix">
					<view class=""><u-icon name="weixin-circle-fill" color="#5eae72" size="80"></u-icon></view>
					<text style="font-size: 28rpx;">{{ i18n.Sendittoafriend }}</text>
				</button>
				<!-- #endif -->
				<view class="haib" @click="goPoster">
					<view class=""><u-icon name="photo" color="#5391f1" size="80"></u-icon></view>

					<text style="font-size: 28rpx;">{{ i18n.Productionposters }}</text>
				</view>
			</view>
		</u-popup>
		<!-- 海报展示 -->
		<view class="mask" v-if="posterImageStatus" @click="posterImageStatus = false"></view>
		<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
		<view class="canvasimgbox" v-if="posterImageStatus">
			<image class="canvasimg" @longtap="saveimage" :src="img" mode="widthFix"></image>
			<image src="/static/images/poster-close.png" class="close" @click="posterImageClose" v-if="posterImageStatus"></image>
			<view class="keep" v-if="posterImageStatus">{{ i18n.Longpresstosavethepicture }}</view>
		</view>
	</view>
</template>
<script>
const globalData = getApp().globalData;
import { Context } from '@/utils/context.js';
import { getStoreDetail, getStoreGoods } from '@/api/store.js';
import { getappid } from '@/api/public.js';
import { APPID } from '@/config/app';
import { mapGetters } from 'vuex';
import { getQRcode } from '@/api/api.js';
import { toLogin } from '@/libs/login.js';
export default {
	data() {
		return {
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			img: '',
			posterImageStatus: false,
			storeImage: '/static/images/aa3b94e9cd1995b5ebe56545a815a26764f1c35677a94-Xt87l2_fw1200.jpg', //海报产品图
			posterbackgd: '/static/images/posterbackgd.png',
			canvasStatus: false, //海报绘图标签
			isopen: false, //是否打开分享组件
			systemInfo: uni.getSystemInfoSync(),
			navActive: 0,
			storeHeight: 0,
			sortPrice: true, // 价格排序
			isColumn: true,
			navShow: false,
			count: 5,
			id: '', // 商铺id
			store: {}, // 商铺详情
			goods: [], // 商铺商品
			recommendlist: {}, // 推荐商品
			loadTitle: '',
			loadend: false,
			select: {
				show: false,
				selected: 0,
				options: [
					{
						id: 0,
						name: globalData.$t('index').Default
					},
					{
						id: 1,
						name: globalData.$t('index').Score
					}
				]
			},
			where: {
				order: '',
				keyword: '',
				page: 1,
				limit: 20
			}
		};
	},

	//用户点击右上角分享
	// #ifdef MP
	onShareAppMessage: function() {
		let that = this;
		return {
			title: that.store.mer_name || '',
			imageUrl: that.store.image || '',
			path: '/pages/index/index?id=' + that.id
		};
	},
	//分享朋友圈
	onShareTimeline: function() {
		let that = this;
		return {
			title: that.store.mer_name || '',
			imageUrl: that.store.image || '',
			path: '/pages/index/index?id=' + that.id
		};
	},
	// #endif
	computed: {
		i18n() {
			return globalData.$t('index');
		},
		...mapGetters(['isLogin'])
	},
	methods: {
		//隐藏海报
		posterImageClose: function() {
			this.posterImageStatus = false;
			this.canvasStatus = false;
		},
		//保存海报
		saveimage:function(){
			//#ifdef MP
			let that = this;
			uni.saveImageToPhotosAlbum({
				filePath: this.img,
				success() {
					uni.showToast({
						title: that.i18n.Thepicturewassavedsuccessfully,
						duration: 2000
					});
				}
			});
			//#endif
		},	
		Saveposters: function() {
			let that = this;
			uni.canvasToTempFilePath({
				x: 0,
				y: 0,
				width: 280,
				height: 420,
				fileType: 'png',
				quality: 1,
				canvasId: 'myCanvas',
				success: function(res) {
					that.canvasStatus = false;
					that.posterImageStatus = true;
					that.img = res.tempFilePath;
				}
			});
		},
		//生产海报
		goPoster: function() {
			let that = this;
			this.canvasStatus = true;
			uni.showLoading({
				title: this.i18n.Postergenerationunderway,
				mask: true
			});
			let arr2 = [that.posterbackgd, that.storeImage];
			that.isopen = false;
			let data = { type: 'wechat', action: 2 };
			getQRcode(globalData.mer_id, data).then(res => {
				uni.downloadFile({
					url: res.data.url, //仅为示例，并非真实的资源
					success: res => {
						arr2[2] = res.tempFilePath;
						that.$util.PosterCanvas(arr2, that.store.mer_name, '', function(tempFilePath) {
							that.Saveposters();
						});
					},
					fail: function(res) {
						uni.hideLoading();
						that.$util.Tips({
							title: that.i18n.PosterQRcodegenerationfailed
						});
					}
				});
			});
		},
		//分享给朋友
		goFriend: function() {
			this.isopen = false;
		},
		//是否打开分享组件
		share: function() {
			this.isopen = !this.isopen;
		},
		// 去商品详情页
		goGoodsDetail: function(id) {
			uni.navigateTo({
				url: `/pages/goods_details/index?id=${id}&mer_id=${this.id}`
			});
		},
		//根据appid获得商铺id
		getmerid: function() {
			let that = this;
			const id = { appid: APPID };
			getappid(id)
				.then(res => {
					that.id = res.data.mer_id;
					this.getStore();
				})
				.catch(res => {});
		},
		// 获取商铺详情
		getStore: function() {
			let that = this;
			getStoreDetail(globalData.mer_id)
				.then(res => {
					that.store = res.data;
					that.id = res.data.mer_id;
				})
				.catch(res => {
					return that.$util.Tips({
						title: res
					});
				});
		},
		// 获取商铺商品
		getGoods: function() {
			let that = this;
			if (this.loadend) return;
			this.loadTitle = '';
			getStoreGoods(that.id, that.where)
				.then(res => {
					that.goods = that.$util.SplitArray(res.data.list, that.goods);
					let loadend = res.data.list.length < that.where.limit;
					that.loadend = loadend;
					that.loadTitle = loadend ? that.i18n.YiLoadMore : that.i18n.LoadMore;
					that.where.page += 1;
				})
				.catch(res => {
					that.loadTitle = that.i18n.LoadMore;
					return that.$util.Tips({
						title: res.message
					});
				});
		},
		//排序
		set_where: function(param) {
			this.loadend = false;
			this.select.show = false;
			this.where.page = 1;
			this.goods = [];
			switch (param) {
				case 0:
					this.select.selected = 0;
					this.where.order = '';
					this.getGoods();
					break;
				case 1:
					this.navActive = ;
					this.where.order = '';
					this.getGoods();
					break;
				case 2:
					this.navActive = 1;
					this.where.order = 'sales';
					this.getGoods();
					break;
				case 3:
					this.navActive = 2;
					this.sortPrice = !this.sortPrice;
					this.where.order = this.sortPrice ? 'price_asc' : 'price_desc';
					this.getGoods();
					break;
				case 4:
					this.navActive = 3;
					this.where.order = 'is_new';
					this.getGoods();
					break;
			}
		},
		search: function() {
			//关键字搜索
		},
		// 商铺首页滚动 navbar 吸顶
		scrollHome: function(e) {
			this.navShow = e.detail.scrollTop >= this.storeHeight;
		}
	},
	mounted: function() {
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#guarantee')
			.boundingClientRect(data => {
				this.storeHeight = data.top;
			})
			.exec();
	},

	onShow() {
		console.log(uni.getStorageSync('mer_id'))
		//#ifdef H5
		this.getStore();
		//#endif
		//#ifdef MP
		this.getmerid();
		//#endif
		this.getGoods();
		uni.setNavigationBarTitle({
			title: '店铺'
		});
	},
	onLoad(option) {
		this.id=option.mer_id
		//#ifdef H5
		toLogin();
		//#endif
		//底部tabbar
		uni.setTabBarItem({
			index: 0,
			text: this.i18n.Home
		});
		uni.setTabBarItem({
			index: 1,
			text: this.i18n.Classify
		});
		uni.setTabBarItem({
			index: 2,
			text: this.i18n.GoodsCart
		});
		uni.setTabBarItem({
			index: 3,
			text: this.i18n.My
		});
	}
};
</script>
<style lang="scss">
.float {
	z-index: 999;
	position: fixed;
	right: 30rpx;
	bottom: 150rpx;
	image {
		width: 80rpx;
		height: 80rpx;
	}
}
.fwfw {
	background: #f5f5f5 !important;
	color: #999999;
}
.fff {
	background-color: #ffffff !important;
	color: #000000 !important;
}
.content {
	display: flex;
	text-align: center;
	padding-top: 40rpx;
	padding-bottom: 40rpx;
	.weix {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
	}
	.haib {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
	}
}
.guarantee {
	display: flex;
	margin-bottom: 20rpx;
	.item {
		flex: 1;
		height: 148rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		image {
			width: 44rpx;
			height: 44rpx;
			display: inline-block;
			margin-bottom: 20rpx;
		}
		.text {
			font-size: 24rpx;
			color: #222222;
		}
	}
}
.recommend {
	background-color: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	.top {
		display: flex;
		flex-direction: column;
		margin-bottom: 40rpx;
		.title {
			text-align: center;
			font-size: 34rpx;
			font-weight: 700;
			color: #222222;
			margin-bottom: 13rpx;
		}
		.subtitle {
			display: flex;
			justify-content: center;
			align-items: center;
			text {
				font-size: 24rpx;
				color: #222;
				padding: 0 17rpx;
			}
			span {
				width: 88rpx;
				border: 1rpx solid #bdbdbd;
			}
		}
	}
	.recommend-goods {
		display: flex;
		flex-wrap: nowrap;
		.item:nth-child(2) {
			margin: 0 17rpx;
		}
		.item {
			width: 219rpx;
			image {
				width: 219rpx;
				height: 219rpx;
				border-radius: 8rpx;
				margin-bottom: 16rpx;
			}
			.name {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 26rpx;
				color: #333;
				font-weight: bold;
				padding: 16rpx 0 4rpx 0;
			}
			.price {
				font-size: 24rpx;
				font-weight: bold;
				color: #db4234;
			}
		}
	}
}
.canvas {
	width: 280px;
	height: 420px;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	top: 50%;
	margin-top: -357rpx;
}

.canvas .close {
	width: 46rpx;
	height: 75rpx;
	position: fixed;
	right: 0;
	top: -73rpx;
	display: block;
}

.canvas .keep {
	position: fixed;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	text-align: center;
	font-size: 25rpx;
	margin-top: 10rpx;
}
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 11;
}
.store-home {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	background: left top/750rpx 360rpx no-repeat fixed;
	overflow: hidden;
	.search {
		margin: 12rpx 120rpx 0 20rpx;
	}
	.store {
		background-color: #ffffff;
		position: relative;
		z-index: 6;
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;
		height: 136rpx;
		image {
			width: 74rpx;
			height: 74rpx;
			border-radius: 6rpx;
			margin-right: 20rpx;
		}
		.text {
			display: flex;
			flex-direction: column;
			flex: 1;
			min-width: 0;
			margin-right: 20rpx;
			.name {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 1;
				color: #000;
			}
			.score {
				display: flex;
				align-items: center;
				margin-top: 17rpx;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 1;
				color: #ffffff;
			}
		}
		.goodssum {
			display: flex;
			flex-direction: column;
			justify-content: center;
			.sum {
				text-align: center;
				font-size: 32rox;
				font-weight: bold;
			}
			.ww {
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
	.nav.fixed {
		position: fixed;
		left: 0;
		width: 100%;

		.nav-cont {
			position: absolute;
			width: 100%;
		}
	}

	.nav {
		z-index: 99;
		position: fixed;
		top: 0;
		width: 100%;
		background: linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
		.nav-cont {
			display: flex;
			align-items: center;
			height: 84rpx;
			color: #ffffff;
			.item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				min-width: 0;
				height: 60rpx;
				.navigator {
					width: 138rpx;
					height: 60rpx;
					border-radius: 30rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 60rpx;
					background-color: rgba(255, 255, 255, 0.3);
				}
				.cont {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 60rpx;
					font-weight: 500;
					font-size: 24rpx;
					font-weight: bold;

					.arrow-icon {
						margin-left: 10rpx;
						font-size: 18rpx;
					}

					.layout-icon {
						font-size: 36rpx;
					}

					.icon-pailie {
						font-size: 32rpx;
					}

					image {
						width: 15rpx;
						height: 21rpx;
						margin-left: 7rpx;
					}
				}
			}

			.active {
				.cont {
					border-bottom: 7rpx solid #e93323;
				}
			}
		}

		.select {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 2;
			width: 100%;
			padding-right: 60rpx;
			padding-bottom: 28rpx;
			padding-left: 74rpx;
			border-bottom-right-radius: 24rpx;
			border-bottom-left-radius: 24rpx;
			background-color: #ffffff;

			.item {
				margin-top: 28rpx;
				font-size: 24rpx;
				color: #454545;
			}

			.active {
				background: url(@/static/images/active.png) right center/20rpx no-repeat;
				color: #e93323;
			}
		}
	}
	.main {
		flex: 1;
		min-height: 0rpx;
	}
	.goods-wrap {
		.top {
			display: flex;
			flex-direction: column;
			padding-bottom: 40rpx;
			.title {
				text-align: center;
				font-size: 34rpx;
				font-weight: 700;
				color: #222222;
				padding-bottom: 13rpx;
			}
			.subtitle {
				display: flex;
				justify-content: center;
				align-items: center;
				text {
					font-size: 24rpx;
					color: #222;
					padding: 0 17rpx;
				}
				span {
					width: 88rpx;
					border: 1rpx solid #bdbdbd;
				}
			}
		}
	}
	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
		background-color: #f5f5f5;
		width: 750rpx;
		.item {
			width: 345rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			background-color: #ffffff;
			overflow: hidden;

			.image {
				width: 345rpx;
				height: 345rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.text {
				padding: 20rpx 20rpx 25rpx;

				.name {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
				}

				.money-wrap {
					margin-top: 20rpx;
					.money {
						font-weight: bold;
						font-size: 26rpx;
						color: #e93323;
						text {
							font-size: 34rpx;
							line-height: 1;
						}
					}
					.label {
						display: flex;
						flex-wrap: wrap;
						.ticket {
							height: 26rpx;
							padding-right: 9rpx;
							padding-left: 9rpx;
							border: 1rpx solid #e93323;
							border-radius: 4rpx;
							margin-left: 10rpx;
							font-weight: 500;
							font-size: 20rpx;
							line-height: 24rpx;
							color: #e93323;
							margin-top: 17rpx;
						}
						.pinkage {
							height: 26rpx;
							padding-right: 9rpx;
							padding-left: 9rpx;
							border: 1px solid #6b78ab;
							border-radius: 4rpx;
							margin-left: 10rpx;
							font-weight: 500;
							font-size: 20rpx;
							line-height: 24rpx;
							color: #6b78ab;
							margin-top: 17rpx;
						}
					}
				}

				.score {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 20rpx;
					line-height: 1;
					color: #737373;
				}
			}

			.foot {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 52rpx;
				background: linear-gradient(to right, #f11b09, #f67a38);
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;

				.iconfont {
					margin-right: 10rpx;
					font-size: 22rpx;
					line-height: 1;
				}
			}
		}
	}

	.column {
		padding: 0;
		background-color: #ffffff;

		.item {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 30rpx 20rpx;
			border-radius: 0;
			margin-bottom: 0;

			&::before {
				content: ' ';
				position: absolute;
				top: 0;
				right: 20rpx;
				left: 250rpx;
				border-top: 1rpx solid #f5f5f5;
			}

			.image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
				overflow: hidden;
			}

			.text {
				position: relative;
				flex: 1;
				min-width: 0;
				padding-top: 0;
				padding-right: 0;
				padding-bottom: 0;

				.name {
					color: #282828;
				}

				.money-wrap {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					margin-top: 52rpx;

					.ticket {
						height: 28rpx;
						padding-right: 12rpx;
						padding-left: 12rpx;
						border: none;
						border-radius: 0;
						margin-top: 17rpx;
						margin-left: 0;
						background: url(@/static/images/yh.png) top left/100% 100% no-repeat;
						line-height: 28rpx;
					}
					.pinkage {
						height: 26rpx;
						padding-right: 9rpx;
						padding-left: 9rpx;
						border: 1px solid #6b78ab;
						border-radius: 4rpx;
						margin-left: 10rpx;
						margin-top: 17rpx;
						font-weight: 500;
						font-size: 20rpx;
						line-height: 24rpx;
						color: #6b78ab;
					}
				}
			}

			.foot {
				position: absolute;
				right: 20rpx;
				bottom: 30rpx;
				height: 44rpx;
				padding-right: 17rpx;
				padding-left: 17rpx;
				border-radius: 22rpx;
				font-size: 22rpx;
				color: #f5f5f5;
			}
		}
	}
}
</style>
